<div aria-live="polite" aria-atomic="true" class="position-fixed" style="z-index: 9999;">
    <!-- Position it: -->
    <!-- - `.toast-container` for spacing between toasts -->
    <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
    <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 9999">
        <div *ngFor="let toast of toasts" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
            <div  class="toast-header">
                <strong class="me-auto">{{messageType(toast)}}</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close" (click)="removeToast(toast)"></button>
            </div>
            <div class="toast-body">
                {{toast.message}}
            </div>
        </div>
    </div>
</div>